import React from "react";
import {Component} from "react";

export default class Page extends Component{
    render() {
        return(
            <div className="pages_parent">
                <nav aria-label="Page navigation ">
                    <ul className="pagination pagination-lg">
                        <li>
                            <a href="#" aria-label="Previous" onClick={()=>{this.changePage(-1)}} style={{pointerEvents:this.props.pages.isFirstPage? "none" :"auto"}}>
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[0])}} style={{pointerEvents:this.props.pages.isFirstPage? "none" :"auto"}}>    {this.props.navigatePage[0]}</a></li>
                        <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[1])}} >    {this.props.navigatePage[1]}</a></li>
                        <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[2])}} >    {this.props.navigatePage[2]}</a></li>
                        <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[3])}} >    {this.props.navigatePage[3]}</a></li>
                        <li><a href="#" onClick={()=>{this.changePage(this.props.navigatePage[4])}} style={{pointerEvents:this.props.pages.isLastPage? "none" :"auto"}}>    {this.props.navigatePage[4]}</a></li>
                        <li>
                            <a href="#" aria-label="Next" onClick={()=>{this.changePage(-3)}} style={{pointerEvents:this.props.pages.isLastPage? "none" :"auto"}}>
                                <span aria-hidden="true" >&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        )
    }
}